<!-- 合同-合同中心-签署中合同 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew title="签署中" :breadCrumb="['合同', '合同中心', '签署中列表']" />
    </template>

    <ConditionBox :margin-bottom="20" :margin-top="0">
      <template #left>
        <a-input-search :style="{ width: '220px' }" placeholder="姓名" search-button @search="onSearch" @press-enter="onSearch" v-model="nameSearch" />
      </template>
    </ConditionBox>

    <table-turn :table-data="getTableData" ref="tableRef" :args="{
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false
        }
      }">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="姓名" />
      <a-table-column :width="200" data-index="mobile" title="手机号码" />
      <a-table-column :width="200" data-index="companyId" title="公司">
        <template #cell="{ record }">
          {{
            companyList.find((item) => item.id === record.companyId)?.name ||
            '-'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="positionLevel" title="入职部门">
        <template #cell="{ record }">
          {{
            positionLevelList.find((item) => item.id === record.positionLevel)
              ?.name || '-'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="positionName" title="职位" />
      <a-table-column :width="200" data-index="natureWork" title="工作性质" />
      <a-table-column :width="200" data-index="definition" title="员工状态">
        <template #cell="{ record }">
          {{
            record.progress === 1
              ? '入职申请'
              : record.progress === 2
              ? '待入职'
              : record.progress === 3
              ? '预入职'
              : record.progress === 4
              ? '入职办理'
              : record.progress === 5
              ? '正式入职'
              : record.progress === 6
              ? '待离职'
              : record.progress === 7
              ? '离职'
              : record.progress === 8
              ? '放弃入职'
              : record.progress === 9
              ? '实习结束'
              : record.progress === 10
              ? '转正'
              : record.progress === 11
              ? '试用期'
              : record.progress === 12
              ? '人事异动'
              : ''
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="entryTime" title="入职时间" />
      <a-table-column :width="120" data-index="contractStatus" title="签署状态" fixed="right">
        <template #cell="{ record }">
          <div :style="{
              color: contractStatus.find(
                ({ value }) => value === record.contractStatus
              )?.color
            }">
            {{
              contractStatus.find(
                ({ value }) => value === record.contractStatus
              )?.text || '-'
            }}
          </div>
        </template>
      </a-table-column>
      <a-table-column :width="150" data-index="" title="操作" fixed="right">
        <template #cell="{ record }">
          <a-space>
            <a-link @click="toContractDetails(record)" v-if="record.contractStatus === 8">
              查看详情
            </a-link>
            <a-link @click="
                () => {
                  router.push({
                    name: 'ComfirmSignContract',
                    query: {
                      userId: record.id
                    }
                  });
                }
              " v-if="record.contractStatus === 9">
              确认签署
            </a-link>
            <a-dropdown @select="printingOrDownload($event, record)" v-if="record.contractStatus === 9">
              <a-link>更多</a-link>
              <template #content>
                <a-doption :value="1">下载</a-doption>
                <a-doption :value="2">打印</a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
</template>

<script lang="ts" setup>
import { GetLegalEntityList } from '@/apis/management/organization/organizationManagement/LegalEntity/index';
import { GetPositionLevelList } from '@/apis/management/organization/baseSetting';
import {
  contractStatus,
  contractStatusToUserStatus
} from '@/utils/dictionary/contract';
import {
  GetWaitSignedContractList,
  GetUserContractByStatusDetail,
  SwitchDraftWaitSignedContract
} from '@/apis/management/contract/contractManagement/waitSigned';
import printJS from 'print-js';
import { htmlStrToPdf, paper } from '@/utils/printAndPdf';

let router = useRouter();
let tableRef = ref();
let nameSearch = ref(''); // 搜索框值

//打印或者下载
let printingOrDownload = async (type: any, record: any) => {
  let res = await GetUserContractByStatusDetail({
    userId: record.id,
    status: 5
  });
  let srtHtml = await SwitchDraftWaitSignedContract({
    id: res[0].userId,
    text: res[0].children[0].text,
    codes: res[0].children[0].codes
  });
  let url = URL.createObjectURL(
    await htmlStrToPdf([srtHtml], paper.a4.width, paper.a4.height, 20)
  );
  if (type === 2) {
    printJS({ printable: url });
  } else if (type === 1) {
    let link = document.createElement('a');
    link.href = url;
    link.download = res[0].contractName + '.pdf';
    link.click();
  }
};

let toContractDetails = (record: any) => {
  localStorage.setItem('contractDetailsData', JSON.stringify({ ...record }));
  router.push({ name: 'ContractDetails' });
};

// 获取表格数据
const getTableData = async (pageData: any) => {
  try {
    return Promise.resolve(
      await GetWaitSignedContractList({
        codes: '6,7,8,9',
        name: nameSearch.value,
        ...pageData
      })
    );
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};

let companyList = ref<any[]>([]);
let positionLevelList = ref<any[]>([]);
let loadData = async () => {
  let [legalEntity, positionLevel] = await Promise.all([
    GetLegalEntityList({ pageNumber: 0, pageSize: -1 } as any),
    GetPositionLevelList({ page: 1, size: -1 })
  ]);
  companyList.value = legalEntity?.content || [];
  positionLevelList.value = positionLevel?.content || [];
};
loadData();
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
}
</style>
